<template>
  <div class="fly-panel fly-column">
    <div class="layui-container">
      <ul class="layui-clear">
        <!-- <li class="layui-hide-xs layui-this"><a href="/">首页</a></li> -->
        <router-link
          v-for="(item, index) in lists"
          :key="'panel' + index"
          tag="li"
          :to="item.path"
        >
          <a href="jie/index.html"
            >{{ item.name
            }}<span class="layui-badge-dot" v-if="item.isNew"></span
          ></a>
        </router-link>
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
          <span class="fly-mid"></span>
        </li>

        <!-- 用户登入后显示 -->
        <template v-if="isLogin">
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
            <router-link :to="{ name: 'mypost' }">我发表的贴</router-link>
          </li>
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
            <router-link :to="{ name: 'mycollection' }">我收藏的帖</router-link>
          </li>
        </template>
      </ul>

      <div class="fly-column-right layui-hide-xs">
        <span class="fly-search"><i class="layui-icon"></i></span>
        <a @click="listadd" class="layui-btn">发表新帖</a>
      </div>
      <div
        class="layui-hide-sm layui-show-xs-block"
        style="margin-top: -10px; padding-bottom: 10px; text-align: center"
      >
        <a @click="listadd()" class="layui-btn">发表新帖</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Panel",
  data () {
    return {
      isLogin: this.$store.state.isLogin,
      lists: [
        {
          name: "首页",
          path: "/",
          isNew: false,
        },
        {
          name: "提问",
          path: "/index/ask",
          isNew: false,
        },
        {
          name: "分享",
          path: "/index/share",
          isNew: true,
        },
        {
          name: "讨论",
          path: "/index/discuss",
          isNew: false,
        },
        {
          name: "建议",
          path: "/index/advice",
          isNew: false,
        },
        {
          name: "公告",
          path: "/index/notice",
          isNew: false,
        },
        {
          name: "动态",
          path: "/index/logs",
          isNew: false,
        },
      ],
    };
  },
  methods: {
    listadd () {
      if (!this.isLogin) {
        this.$pop("shake", "请登录");
        return;
      }
      this.$router.push("/add").catch((err) => {
        return this.$router.push;
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
